<template>
  <div>
    <div class="ecCol">
      <!-- <el-col> -->
      <div
        class="echartList"
        id="xianxingtu"
        ref="xianxingtu"
        style="width: 50%; height: 450px"
      ></div>
      <!-- </el-col> -->
      <div
        style="width: 50%; height: 450px"
        class="echartList"
        ref="zhuxingtu"
      ></div>
    </div>
    <div class="ecCol">
      <div
        class="echartList"
        ref="yuanxingtu"
        style="width: 50%; height: 450px"
      ></div>
      <div
        class="echartList"
        ref="yuanxingtu"
        style="width: 50%; height: 450px"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.xings();
    // window.onresize = () => {
    //   this.xinChart.resize();
    //   this.yuanChart.resize();
    //   this.zhuChart.resize();
    // };
  },
  watch: {},
  methods: {
    xings() {
      let xinChart = this.$echarts.init(
        document.getElementById("xianxingtu"),
        null
      );
      let zhuChart = this.$echarts.init(this.$refs.zhuxingtu, null);
      let yuanChart = this.$echarts.init(this.$refs.yuanxingtu, null);
      const xinCharts = {
        title: { text: "往期营业额" },
        tooltip: {},
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        // 线形图
        yAxis: {},
        series: [
          {
            data: [120, 322, 228, 123, 569, 116, 180],
            type: "line",
            smooth: true,
          },
        ],
      };
      const zhuCharts = {
        title: { text: "柱形图" },
        tooltip: {},
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        // 线形图
        yAxis: {},
        series: [
          {
            data: [120, 322, 228, 123, 569],
            type: "bar",
            smooth: true,
          },
        ],
      };
      const yuanCharts = {
        title: { text: "各个产品当天销量图" },
        tooltip: {},
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "牛排",
              },
              {
                value: 234,
                name: "小吃",
              },
              {
                value: 548,
                name: "披萨",
              },
              {
                value: 234,
                name: "饮料",
              },
              {
                value: 480,
                name: "面食",
              },
            ],
            smooth: true,
          },
        ],
      };
      xinChart.setOption(xinCharts);
      zhuChart.setOption(zhuCharts);
      yuanChart.setOption(yuanCharts);
      const _this = this;
      this.$nextTick(() => {
        xinChart.resize();
        zhuChart.resize();
        yuanChart.resize();
      });
      window.addEventListener("resize", function () {
        xinChart.resize();
        zhuChart.resize();
        yuanChart.resize();
      });
    },
  },
};
</script>

<style lang="less">

</style>